import { createRouter, createWebHistory } from "vue-router";

import Layout from "@/views/layout/index.vue";
import store from "@/store";
export const routes = [
  {
    path: "/login",
    name: "login",
    label: "登录", // 菜单的名字
    hidden: true, // 不参与菜单栏的显示
    component: () => import("@/views/login/index.vue"),
  },
  {
    path: "/403",
    name: "no-permission",
    label: "403",
    hidden: true,
    component: () => import("@/views/error/no-permission.vue"),
  },
  //显示需要的路由，利用重定向
  {
    label: "首页",
    name:'欢迎',
    path: "/",
    redirect: "/home",
    icon:'HomeFilled',
  },
  //不显示子路由
  {
    path: "/",
    name: "首页",
    label: "首页",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "home",
        component: () => import("@/views/home/home.vue"),
      },
    ],
  },
  {
    path: "/banner",
    name: "轮播图管理",
    label: "轮播图管理",
    component: Layout,
    icon:'Comment',
    children: [
      {
        path: "swiper",
        name: "走马灯",
        label: "走马灯",
        icon:'Crop',
        component: () => import("@/views/banner/swiper.vue"),
      },
      {
        path: "list",
        name: "轮播图列表",
        label: "轮播图列表",
        icon:'Operation',
        component: () => import("@/views/banner/list.vue"),
      },
      {
        path: "add",
        name: "轮播图新增",
        label: "轮播图新增",
        icon:'ZoomIn',
        component: () => import("@/views/banner/add.vue"),
      },
    ],
  },
  {
    path: "/manager",
    name: "管理员管理",
    label: "管理员管理",
    component: Layout,
    icon:'Histogram',
    children: [
      {
        path: "list",
        name: "管理员列表",
        label: "管理员列表",
        icon:'Star',
        component: () => import("@/views/manager/list.vue"),
      },
      {
        path: "img",
        name: "管理图表",
        label: "管理图表",
        icon:'Notification',
        component: () => import("@/views/manager/img.vue"),
      },
    ],
  },
  {
    path: "/pro",
    name: "商品管理",
    label: "商品管理",
    component: Layout,
    icon:'Comment',
    children: [
      {
        path: "list",
        name: "商品列表",
        label: "商品列表",
        icon:'ChatDotRound',
        component: () => import("@/views/pro/list.vue"),
      },
    ],
  },
  {
    path: "/plugin",
    name: "插件",
    label: "插件",
    component: Layout,
    icon:'Tools',
    children: [
      {
        path: "list",
        name: "日历",
        label: "日历",
        icon:'Clock',
        component: () => import("@/views/plugin/Calendar.vue"),
      },
    ],
  },
  {
    path: "/test",
    name: "功能测试",
    label: "功能测试",
    component: Layout,
    icon:'QuestionFilled',
    children: [
      {
        path: "list",
        name: "测试1",
        label: "测试1",
        icon:'ChatLineSquare',
        component: () => import("@/views/test/next-tick.vue"),
      },
      {
        path: "tree",
        name: "测试2",
        label: "测试2",
        icon:'ChatRound',
        component: () => import("@/views/test/tree.vue"),
      },
      {
        path: "trees",
        name: "测试3",
        label: "测试3",
        icon:'ChatLineRound',
        component: () => import("@/views/test/trees.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

// 定义一个数组，数组中每一项是一个 路由的 name 的值，配置在这个数组中的路由name，代表不需要检验登录
const whiteList = ["login", "no-permission"];

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const name = to.name;

  if (whiteList.includes(name)) {
    // 存在，说明这个to不需要校验登录，直接放行
    next();
  } else {
    // 不存在,需要校验登录状态
    const token = localStorage.getItem("token");
    if (token) {
      // 登录了,再判断当前要去的路由,是否有权限

      if (store.state.role === 2 || store.state.pageRoles.includes(name)) {
        // 有权限,直接放行
        next();
      } else {
        // 没有权限,去到一个没有权限的页面
        next({ name: "no-permission" });
      }
    } else {
      // 没登录，需要重定向到登录页面
      next({ name: "login" });
    }
  }
});

export default router;
